import React, { Component } from 'react';
import _ from 'underscore';
import cx from 'classnames';

import View from 'lib/View.jsx';
import dispatcher from 'lib/dispatcher';
import Select from 'lib/components/Select.jsx';

import SettingScope from './SettingScope.es6';
import SettingItem from './SettingItem.jsx';

export default class SettingView extends View {
  loadProperties(item) {
    this.dispatcher.dispatch({
      $type: 'load_properties',
      item
    });
  } // $loadProperties

  addItem() {
    this.dispatcher.dispatch({
      $type: 'add_item'
    });
  } // addItem

  removeSelf() {
    dispatcher.dispatch({
      $type: 'remove_indexed_event',
      index: this.props.index
    });
  } // removeSelf

  fieldChanged(item, index) {
    this.dispatcher.dispatch({
      $type: 'field_changed',
      index,
      item
    });
  } // fieldChanged

  funcChanged(item, index) {
    this.dispatcher.dispatch({
      $type: 'func_changed',
      index,
      item
    });
  } // funcChanged

  filterChanged(item, index) {
    this.dispatcher.dispatch({
      $type: 'filter_changed',
      index,
      item
    });
  } // filterChanged

  removeFilter(index) {
    this.dispatcher.dispatch({
      $type: 'remove_filter',
      index
    })
  } // removeFilter

  render() {
    return (
      <div className="event-editor">
        <div className="editor-header">
          <Select
            className="pure-u-1-5"
            showSingleTooltip={ true }
            onChange={ this.loadProperties.bind(this) }
            value={ this.state.target.predefinedEvent }
            options={ this.props.predefinedEvents } />
          {
            this.state.target.filters.length === 0
              ? <a
                  href="javascript:;"
                  className="creator"
                  onClick={ this.addItem.bind(this) }>
                  + 触发限制条件
                </a>
              : null
          }
          {
            this.props.index === 0 ? null : (
              <a
                href="javascript:;"
                className="close"
                onClick={ this.removeSelf.bind(this) }>
                &times;
              </a>
            )
          }
        </div>
        <div className={ cx('editor-body', {
          'has-relation': this.state.target.filters.length !== 0
        })}>
          {
            this.state.target.filters.length > 1
              ? <div className="filter-relation">且</div>
              : null
          }
          {
            this.state.target.filters.map((item, index) => {
              return (
                <SettingItem
                  index={ index }
                  key={ index }
                  item={ item }
                  properties={ this.state.properties }
                  onFieldChanged={ this.fieldChanged.bind(this) }
                  onFunctionChanged={ this.funcChanged.bind(this) }
                  onFilterChanged={ this.filterChanged.bind(this) }
                  onRemove={ this.removeFilter.bind(this) } />
              )
            }, this)
          }
          {
            this.state.target.filters.length !== 0
              ? <div className="iconfont creator" onClick={ this.addItem.bind(this) }>&#xe6bd;</div>
              : null
          }
        </div>
      </div>
    );
  }
}

SettingView.defaultProps = {
  Scope: SettingScope,
  predefinedEvents: [],
  currentEvent: null,
  item: null,
  isNew: true,
  onNeedResize: item => {}
}
